<script setup>
import TopRow from "../components/TopRow.vue";
import axios from "axios";
import { enums } from "../assets/enums.js";
import SignUpTip from "../components/SignUpTip.vue";
import { PathEnum } from "../assets/PathEnum.js";
</script>
<script>
export default {
  data() {
    return { username: "", alerts: "", SignUpTip_seen: false };
  },
  methods: {
    postname() {
      if (this.username.length < 4 || this.username.length > 20) {
        this.alerts = enums.username_alerts.FORMAT_ERROR;
      } else {
        axios
          .post(PathEnum.releasePath.registe, "UserName=" + this.username)
          .then((res) => {
            console.log(res);
            if (res.data.length != 0) {
              this.alerts = "";
              this.SignUpTip_seen = true;
            } else {
              this.alerts = enums.username_alerts.EXIST;
            }
          })
          .catch((err) => {
            console.log(err);
            this.alerts = "检查网络连接或服务器错误";
          });
      }
    },
  },
};
</script>
<template>
  <main>
    <TopRow title="注册" goback_seen="true" />
    <SignUpTip v-if="SignUpTip_seen"></SignUpTip>
    <div class="notice">请输入您的注册信息</div>
    <div class="inputbox">
      用户名
      <input
        v-model="username"
        type="text"
        name="use"
        placeholder="请输入4-20位英文字符"
      />
    </div>

    <div class="error_notice">{{ this.alerts }}</div>
    <div class="buttonbox">
      <div @click="postname" class="button">注册</div>
    </div>
  </main>
</template>
<style scoped>
.notice {
  position: fixed;
  width: 126px;
  height: 20px;
  left: 32px;
  top: 104px;

  font-weight: 400;
  font-size: 14px;
  line-height: 20px;

  color: #666666;
}
.inputbox {
  position: fixed;
  height: 56px;
  left: 8px;
  right: 8px;
  top: 150px;
  background-color: #ffffff;

  line-height: 56px;
  padding-left: 15px;
  color: #000000;
}
input {
  position: fixed;

  height: 56px;
  left: 113px;
  right: 8px;
  top: 150px;
  line-height: 56px;
  border: 0px;

  color: #000000;
  font-weight: 400;
  font-size: 17px;

  mix-blend-mode: normal;
  opacity: 0.3;
}
input:focus {
  outline: none;
}
.error_notice {
  position: absolute;
  width: 272px;
  height: 20px;
  left: 40px;
  top: 214px;

  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;

  color: #ff0000;
}
.buttonbox {
  position: absolute;
  width: 100%;
  height: 40px;
  top: 736px;

  padding: 0px;
}
.button {
  width: 343px;
  height: 40px;
  margin: 0 auto;
  font-weight: 400;
  font-size: 14px;
  line-height: 40px;

  text-align: center;
  background: #42a4ff;
  border-radius: 20px;
}
</style>
